<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">
    <title>[群聊]讯飞大家庭</title>
    <link rel="stylesheet" href="style.less">
</head>
<body>
<div id="app">
    <div class="chat-window" ref="chat-window">  
      <div class="chat-list" ref="chat-list" :style="{transform: 'translateY(' + -scrollTop + 'px)'}">
        <div v-for="chatItem in chatList" class="chat-item">
          <div v-if="chatItem.from === 'system'" class="system-msg">
            <div class="msg">{{chatItem.text}}</div>
          </div>
            <div v-else :class="[chatItem.from === 'me' ? 'chat-item-me' : 'chat-item-other']">
                <span class="avatar" :style="{backgroundImage: 'url(' + user[chatItem.from].avatar + ')'}"></span>
                <div class="content">
                    <div class="nickname">{{user[chatItem.from].nickname}}</div>
                    <div class="content-body">
                      <div v-if="chatItem.text" class="text">{{chatItem.text}}<a :href="chatItem.link" v-if="chatItem.link">@站外链接</a></div>
                      <div v-else class="image" :style="{backgroundImage: 'url(' + chatItem.image + ')'}">
                        <div :style="{paddingTop: chatItem.sizePercent * 100 + '%'}"></div>
                      </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
  <div class="footer">
      <div class="input-bar">
        <div class="typed-area">{{typedText}}</div>
      </div>
      <div class="sound-input">
          <div class="sound-wave">
              <span class="line1"></span>
              <span class="line2"></span>
              <span class="line3"></span>
              <span class="line4"></span>
          </div>
          <div class="mask" :class="[isTyping ? 'hidden' : '']">讯飞语音输入法</div>
      </div>
  </div>
  <a class="show-detail-action" href="javascript:showdetail()">点击获取群聊攻略</a>
  <div class="detail" v-if="isShowShare">
    <a href="javascript:void(0)" class="close" @click="isShowShare = false">×</a>
    <div class="article">
      <h3>“光影随心”摄影比赛地址</h3>
      <div class="qr-code">
        <img src="images/qrcode.png" alt="二维码">
      </div>
      <a href="http://kcloudtest.iflytek.com/photowall/" target="_blank">http://kcloudtest.iflytek.com/photowall/</a>
      <p>我的作品：「旅行随拍-剧中人」、「中国声谷看雪景」</p>
      <div v-if="randomPicUrl" class="random-pic" :style="{backgroundImage: 'url(' + randomPicUrl + ')'}">
        <div class="title">随机作品</div>
      </div>
    </div>
  </div>
  <div class="loading-mask">
    <div class="text"><p>正在加入群聊</p><h3>讯飞大家庭</h3></div>
  </div>
</div>
<img src="'chat-image/despacito.png" alt="讯飞大家庭">
<p>快进群，看看这一群逗逼在聊什么。</p>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="define.js?__inline"></script>
<script type="text/javascript">
  var _hmt = _hmt || [];
  (function () {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?0f6bfc1dac208f86e5effd5f2d59027d";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
  })();
</script>
</body>
</html>